<template>
	<div class="div">
		<div class="div2">
			<h5 v-show="this.$route.query.act==1">商品-添加</h5>
			<h5 v-show="this.$route.query.act==0">商品-修改</h5>
			<el-button style="color:#7dd7ff;border: none;">返回列表</el-button>
			<el-button style="color:#7dd7ff;border: none;" @click="addbook()">保存....</el-button>
			<h6>2层商品类型下拉框 el-cascader</h6>
		</div>
		<hr>
		<div class="div3">
			<div class="div4">
				<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
					:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange"
					action="uploadAction" list-type="picture" accept="image/jpg,image/jpeg">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>
			<div class="div5">
				<el-form ref="book" :model="book" label-width="100px">
					<el-form-item label="商品名称">
						<el-input v-model="book.name"></el-input>
					</el-form-item>

					<el-form-item label="商品序号">
						<el-input v-model="book.sn"></el-input>
					</el-form-item>

					<el-form-item label="商品价格">
						<el-input v-model="book.price"></el-input>
					</el-form-item>

					<el-form-item label="商品厂商">
						<el-input v-model="book.maker"></el-input>
					</el-form-item>

					<el-form-item label="书籍作者">
						<el-input v-model="book.author"></el-input>
					</el-form-item>

					<el-form-item label="出产时间">
						<el-date-picker v-model="book.tmake" type="date" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>

					<el-form-item label="商品库存">
						<el-input v-model="book.stock"></el-input>
					</el-form-item>

					<el-form-item label="商品类型">
						<el-cascader :props="cus" v-model="values" :options="booktypes" @change="handleChange2">
						</el-cascader>
					</el-form-item>
					<el-form-item label="商品详情">
						<el-input type="textarea" :rows="2" placeholder="请输入商品详情" v-model="book.info">
						</el-input>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'addHot',
		data() {
			return {
				book: {
					id: 0
				},
				fileList: [],
				loading: false,
				imageUrl: "",
				booktypes: [],
				values: [],
				cus: {
					children: "children"
				}
			}
		},
		methods: {
			handleChange2(value) {
				console.log(value);
			},
			handleChange: function(file, fileList) {
				this.fileList = fileList;
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 512;

				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 0.5MB!');
				}
				return isJPG && isLt2M;
			},
			addbook() {
				let fd = new FormData();
				let fl = this.fileList;
					fd.append("id", this.book.id);
				fd.append("name", this.book.name);
				console.log(this.book.name);
				fd.append("sn", this.book.sn);
				console.log(this.book.sn);
				fd.append("price", this.book.price);
				console.log(this.book.price);
				fd.append("maker", this.book.maker);
				console.log(this.book.maker);
				fd.append("author", this.book.author);
				console.log(this.book.author);
				fd.append("tmake", new Date().getTime(this.book.tmake));
				console.log(this.book.tmake);
				fd.append("stock", this.book.stock);
				console.log(this.book.stock);
				let k = this.values.length - 1;
				let typeid = 0;
				if (k != 0) {
					typeid = this.values[k];
				}
				fd.append("type.id", typeid);
				console.log(typeid);
				fd.append("info", this.book.info);
				console.log(this.book.info);
				if (fl.length > 0 && fl[0].raw != null) {
					fd.append("mypic", fl[0].raw);
				}
				console.log(fd);
				this.$postf("/api/adm/book/add", fd).then((resp) => {
					console.log(resp.data);
					this.book = resp.data.data;
					console.log(this.book);
				})
			},
		},
		mounted() {
			console.log(this.values.length - 1);
			this.$get("/api/adm/type/findAll2").then((resp) => {
				console.log(resp.data);
				resp.data.data.forEach((item, i) => {
					if (item.pid == 0) {
						this.booktypes.push({
							value: item.id,
							label: item.name,
						})
					}
				})
				console.log(this.booktypes);
				this.booktypes.forEach((item, i) => {
					let n = [];
					// console.log(item.id);
					resp.data.data.forEach((j, i) => {
						// console.log(j.id);
						if (j.pid > 0 && j.pid == item.value) {
							// console.log(j.pid);
							// console.log(item.id);
							n.push({
								value: j.id,
								label: j.name,
								pid:j.pid,
							})
						}
					})
					item.children = n;
					// console.log(item.children);
					console.log(n);
				})
				console.log(this.booktypes);
			})
			if (this.$route.query.id > 0) {
				this.$get("/api/public/book/findById/" + this.$route.query.id).then((resp) => {
					console.log(resp.data);
					this.book = resp.data.data;
					console.log(this.book.type.pid);
					this.booktypes.children=this.book.type.pid;
					this.imageUrl = `http://127.0.0.1:80/api/public/showimg/${resp.data.data.pic}`;
					
				})
			}

		}
	}
</script>

<style scoped>
	.div {
		width: 100%;
	}

	.div .div2 {
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.div hr {
		border: 1px solid #1E9FFF;
		width: 95%;
		margin: 0 auto;
	}

	.div .div3 {
		width: 95%;
		display: flex;
		margin-top: 2vh;
		margin: 0 auto;
	}

	.div .div3 .div4 {
		width: 40%;
	}

	.div .div3 .div5 {
		margin-left: 15vw;
		width: 60%;
		margin-top: 2vh;
	}

	.div3 .div4 .avatar-uploader {
		border: 1px solid #d9d9d9;
		width: 27%;
		height: 100%;
		margin-top: 6vh;
		margin-left: 7vw;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.div3 .div5 .el-input {
		width: 90%;
	}
</style>
